<template>
  <div>
    <div id="part_one">
      <span>角色名称:</span>
      <el-input placeholder="角色名称查询" v-model="form.name"></el-input>
    </div>
    <div id="part_two">
      <el-button type="primary" icon="el-icon-search">查询</el-button>
      <el-button type="primary" icon="el-icon-refresh-left">重置</el-button>
    </div>
    <div id="part_three">
      <el-button type="primary" icon="el-icon-plus">添加人员</el-button>
    </div>
    <p>
    </p>
    <div id="part_four">
      <el-table :data="tableData"
                border>
        <el-table-column prop="date"
                         label="ID"
                         width="106px">
        </el-table-column>
        <el-table-column prop="name"
                         label="用户名"
                         width="106px">
        </el-table-column>
        <el-table-column prop="yhnc"
                         label="用户昵称"
                         width="259px">
        </el-table-column>
        <el-table-column prop="lxdh"
                         label="联系电话"
                         width="257px">
        </el-table-column>
        <el-table-column prop="bm"
                         label="部门"
                         width="256px">
        </el-table-column>
        <el-table-column prop="gw"
                         label="岗位"
                         width="257px">
        </el-table-column>
        <el-table-column prop="cjsj"
                         label="创建时间"
                         width="149px">
        </el-table-column>
        <el-table-column prop="je"
                         label="Action">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">设置组织</el-button>
            <el-button type="text" size="small">设置角色</el-button>
            <el-button type="text" size="small">重置密码</el-button>
            <el-button type="text" class="warn"  size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="part_five">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[1, 2, 3, 4]"
                     :page-size="4"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="11">
      </el-pagination>
    </div>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        radio: '1',
        activeName: 'second',
        tableData: [{
          date: '201803596',
          name: '无',
          yhnc: '没奶的奶牛',
          lxdh: '133513486',
          bm: '宣传',
          gw: '保镖',
          cjsj: '2021-5-5',
          je: 'asdf'
        }],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      handleClick() {
        alert('button click');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>
<style scoped>
  .warn {
    color: #DC143C;
  }
  .el-input {
    width: 225px;
  }

  #part_one {
  }

  #part_two {
    display: flex;
    justify-content: flex-end;
  }

  #part_three {
  }

  #part_four {
    
  }
  #part_five {
    display: flex;
    justify-content: flex-end;
  }
</style>




